<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-21 19:08:03
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-24 17:02:11
-->
<template>
    <div>
        <el-form inline="true" ref="editFormRef" :model="editForm" status-icon :rules="rules" label-width="120px"
            class="demo-ruleForm">
            <el-card class="box-card">
                <template #header>
                    <div class="card-header">
                        <div class="colorBar"></div>
                        <div>权限信息</div>
                    </div>
                </template>
                <div class="mescustomer">
                    <div class="mescustomerleft">
                        <el-form-item label="职位名称" prop="systemname">
                            <el-input v-model="editForm.systemname" placeholder="请编辑职位名称" />
                        </el-form-item>
                        <el-form-item label="权限等级" prop="systemlevel">
                            <el-select v-model="editForm.systemlevel" placeholder="请选择权限等级" clearable>
                                <el-option label="sss" value="sss" />
                                <el-option label="A" value="A" />
                                <el-option label="B" value="B" />
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="mescustomerright">
                        <el-form-item label="关联部门" prop="systemdepart">
                            <el-input v-model="editForm.systemdepart" placeholder="请编辑关联部门" />
                        </el-form-item>

                        <el-form-item label="是否启用：" prop="systemstate">
                            <el-switch v-model="editForm.systemstate" />
                        </el-form-item>
                    </div>
                </div>
            </el-card>
            <el-card class="buttonItem">
                <el-button type="primary" :loading="loading" @click="saveForm">保存</el-button>
                <el-button type="primary" @click="cancelSave">取消</el-button>
            </el-card>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus"
import { onMounted, reactive, ref } from "vue"
import { successMessage } from "@/utils/Tools/successMessage";
import { errorMessage } from "@/utils/Tools/errorMessage";
import { provinceAndCityData, regionData } from 'element-china-area-data';
import type { ICustomerData } from "@/types/customer";
import { userSystemIditApi } from "@/services/system";
const provinceAndCityDataRef = ref(provinceAndCityData);
const regionDataRef = ref(regionData);
const editFormRef = ref<FormInstance>()
const editForm = ref({
    systemname: "",
    systemdepart: "",
    systemlevel: "",
    systemstate: "",
})

interface IProps {
    followId: number
    setDialogVisible: (visible: boolean) => void
}

const props = defineProps<IProps>()
// // 回显
// onMounted(async () => {
//     let ret = await userCustomerFollowIDUpApi(props.followId)
//     Object.assign(editForm.value, ret.data.customer)
//     editForm.value.customerarea = ret.data.customer.customerarea
// });
// 保存
const loading = ref(false)
const saveForm = () => {
    if (!editFormRef.value) return
    loading.value = true
    editFormRef.value.validate(async valid => {
        if (valid) {
            //这儿需要网络请求
            let ret = await userSystemIditApi(editForm)
            console.log(ret)
            if (ret.code === 200) {
                successMessage('编辑成功', () => {
                    loading.value = false
                    props.setDialogVisible(false)
                }, 1000)
            } else {
                errorMessage('编辑异常，请重新提交', () => {
                    loading.value = false
                }, 3000)
            }
        } else {
            errorMessage('表单验证失败', () => {
                loading.value = false
            }, 3000)
        }
    })
}
// 取消
const cancelSave = () => {
    if (!editFormRef.value) return
    editFormRef.value.resetFields()
}
const rules = reactive<FormRules<ISystemData.IPermission>>({
    systemname: [{ required: true, whitespace: true, message: '职位名称不能为空', trigger: 'blur' }],
    systemdepart: [
        { required: true, whitespace: true, message: '关联部门不能为空', trigger: 'blur' },
    ],
    systemlevel: [
        { required: true, whitespace: true, message: '权限等级不能为空', trigger: 'change' },
    ],
})
</script>

<style lang="scss" scoped>
.mescustomer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto;

    .mescustomerleft {

        width: 50%;
        height: 100%;
        // background-color: red;
    }

    .mescustomerright {
        width: 50%;
        height: 100%;
        // background-color: blue;
    }

}

.boxHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-card {
    margin-bottom: 20px;


    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;

        .card-header {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }
        }


    }

}

.el-form-item {

    .el-input,
    .el-select,
    .el-date-picker,
    .el-date-editor.el-input,
    .el-form-item__content {
        width: 180px !important;
        margin-right: 20px; // Add margin between input fields if needed
    }
}

.textArea {
    width: 96%;
}

.el-date-picker {
    width: 180px !important;
}

.buttonItem {
    display: flex;
    justify-content: center;
    align-items: center;

    .el-button {
        margin: 0 10px; // Adjust margin as needed
    }
}
</style>